<template>
  <div class="menu_box">
    <!-- @open="handleOpen"
      @close="handleClose" -->
    <div v-if="Menulist.length > 0">
      <el-menu background-color="#304156" text-color="#fff" active-text-color="#409eff" class="el-menu-vertical-demo"
        :default-active="active" :default-openeds='defaultOpened' :collapse-transition="false" @select="selectchange"
        :collapse="false" router :unique-opened="true">
        <el-menu-item index="/index">首页</el-menu-item>
        <template v-for="item in Menulist">
          <el-submenu :index="item.id" :key="item.id">
            <template slot="title">
              <i class="el-icon-user-solid"></i>
              <span slot="title">{{ item.meta.title }}</span>
            </template>
            <template v-for="it in item.children">
              <el-menu-item-group :key="it.id">
                <el-menu-item :index="it.path">{{ it.meta.title }}</el-menu-item>
              </el-menu-item-group>
            </template>
          </el-submenu>
        </template>
      </el-menu>
    </div>
    <div v-else style="color: #fff;">
      暂无路由信息
    </div>
  </div>
</template>
<script>
export default {
  props: {
    isCollapse: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      active: sessionStorage.getItem("menupath") ? sessionStorage.getItem("menupath") : "/index",
      Menulist: [],
      defaultOpened: [],
    }
  },
  created() { },
  mounted() {
    this.$nextTick(() => {
      this.Menulist = this.$store.state.menulist.length > 0 ? this.$store.state.menulist : JSON.parse(localStorage.getItem("MenuList"))
    })
  },
  computed: {
  },
  methods: {
    selectchange(key, keyPath) {
      sessionStorage.setItem("menupath", key)
    }
  },
}
</script>
<style lang="less" scoped>
.el-menu {
  border: none;
}

.el-submenu {
  text-align: left;
}

/deep/ .el-menu-item-group__title {
  padding: 0;
}

.menu_box {
  margin-bottom: 150px;
}
</style>
